<template>
  <section>
    <div>
      <div class="clearfix">
        <div class="w304 fl">
          <m-panel :title="$t('dict.type')">
            <div class="dicts" v-if="types.length>0">
              <div class="dict" :title="item.value+' ('+item.key+ ')'"
                   :class="{ 'dict--active': currentType === item.key}" v-for="(item, index) in types" :key="index"
                   @click="clickDict(item)">
                <nobr>{{clippingCharacters(item.value+'('+item.key+')')}}</nobr>
              </div>
            </div>
            <div v-else class="no-data">暂无数据</div>
          </m-panel>
        </div>
        <!--#region 页面主要列表-->
        <div class="-w304 fl">
          <m-panel :title="$t('dict.type')">
            <div class="type" style="padding:8px; box-sizing:border-box;">
              <template v-if="currentType">
                <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd(currentType)"
                           v-if="getOperation('insert')">{{$t('add')}}
                </el-button>

                <el-table :data="dicts" style="margin-top:8px;" stripe border>
                  <el-table-column align="left" header-align="center" :label="$t('dict.key')" minWidth="120" :maxlength="500" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <m-row-input ref="input0" prop="key" :row="scope.row" :rules="rules.key" :maxlength="500"></m-row-input>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" header-align="center" :label="$t('dict.value')" minWidth="100" :maxlength="500" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <m-row-input ref="input1" prop="value" :row="scope.row" :rules="rules.value" :maxlength="500"></m-row-input>
                    </template>
                  </el-table-column>
                  <el-table-column align="left" header-align="center" width='150px' :label="$t('operation')" v-if="getOperation('update|delete')">
                    <template slot-scope="scope">
                      <template v-if="!scope.row.rowEditable">
                        <el-button type="warning" size="small" :disabled="!scope.row.editFlag" @click="handleEdit(scope.row)" v-if="getOperation('update')">{{$t('modify')}}
                        </el-button>
                        <el-button type="danger" size="small" :disabled="!scope.row.editFlag" @click="deleteData(scope.row, scope.$index)" v-if="getOperation('delete')">{{$t('delete')}}
                        </el-button>
                      </template>
                      <template v-else>
                        <el-button type="primary" size="small" @click="submitData(scope.row)">{{$t('submit')}}</el-button>
                        <el-button size="small" @click="handleCancel(scope.row, scope.$index)">{{$t('cancel')}}</el-button>
                      </template>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </div>
          </m-panel>
        </div>
        <!--#endregion-->
      </div>
    </div>
  </section>
</template>

<script>

  /*#region 导入函数*/
  import Panel from "./panel";
  import RowInput from "./row-input";
  import {DictAPI} from "../../../modules";

  /*#endregion*/

  export default {
    name: "Dict",
    computed: {
      types() {
        const TYPE = "root";
        return this.data.filter((item) => item.type === TYPE);
      },
      dicts() {
        if (this.currentType) {
          const TYPE = "root";
          return this.data.filter((item) => item.type === this.currentType && item.value !== TYPE);
        } else {
          return [];
        }
      }
    },
    methods: {

      /*#region 自定义函数(组件change事件等)*/
      clickDict(dict) {
        this.currentType = dict.key;
      },
      clippingCharacters(value) {
        let text = value ? value : "";
        if (text.length > 30) {
          text = text.substring(0, 30) + "...";
        }
        return text;
      },
      submitSuccess() {
        this.getMainList();
      },

      /*#endregion*/

      /*#region 数据提交事件*/
      deleteData(row, index) {
        this.$confirm(this.$t('deleteConfirm'), this.$t('tips'), {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: "warning"
        }).then((_) => {
          DictAPI.deleteDict({id: row.id}).then(({data}) => {
            this.getMainList();
          });
        });
      },
      submitData(row) {
        // Ahahahah...
        if (!row.rowForm.key || !row.rowForm.value) {
          return;
        }

        if (row.id) {
          DictAPI.updateDict(row.rowForm).then(({data}) => {
            if (data.code === 1) {
              row.rowEditable = false;
              this.getMainList();
            }
          });
        } else {
          DictAPI.insertDict(row.rowForm).then(({data}) => {
            if (data.code === 1) {
              row.rowEditable = false;
              this.getMainList();
            }
          });
        }
      },

      /*#endregion*/

      /*#region 操作函数(handle)*/
      handleAdd(type) {
        //unshift
        this.data.unshift({...this.formData, type, rowForm: {...this.formData, type}, rowEditable: true});
      },
      handleEdit(row) {
        row.rowForm = {...row};
        row.rowEditable = true;
      },
      handleCancel(row, index) {
        //console.log("row:", row, "index:", index);
        if (row.id) {
          row.rowEditable = false;
        } else {
          //const b = index - this.dicts.filter((item) => item.id).length + 1;
          //const i = this.data.filter((item) => item.id).length - 1 + b;
          //this.data.splice(i, 1);
          this.data.remove(row);
        }
      },

      /*#endregion*/

      /*#region 获取数据*/
      getMainList() {
        DictAPI.listDict({pageSize: 99999, orderBy: "type asc,Sort asc,id desc", displayFlag: true}).then(({data}) => {
          this.data = data.data.data.map((item) => (
            {...item, rowForm: {}, rowEditable: false}
          ));
        });
      }

      /*#endregion*/
    },

    /*#region 生命周期函数(created、mount、等)*/

    created() {
      this.getMainList();
    },

    /*#endregion*/

    /*#region 注册绑定数据*/
    components: {
      "m-panel": Panel, "m-row-input": RowInput
    },
    data() {
      return {
        filters: DictAPI.init(),
        formData: DictAPI.init(),
        formRules: {},
        dialog: {formDataVisible: false},
        loading: {addLoading: false, listLoading: false},
        dictList: [],
        data: [],
        rules: {
          key: [{required: true, message: this.$t('dict.validateKey')}],
          value: [{required: true, message: this.$t('dict.validateValue')}]
        },
        form: {},

        currentType: null
      };
    }

    /*#endregion */

  };
</script>

<style>
  div.clearfix {
    width: 100%;
  }

  .w304 {
    width: 26%;
    float: left;
  }

  .-w304 {
    width: calc(100% - 28%);
    float: left;
    margin-left: 10px;
  }

  .dicts, .type {
    height: auto;
  }

  .dict {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dict.dict--active {
    background: #EFF2F7;
  }

  .dict:hover {
    background: #EFF2F7;
  }
  .no-data {
      min-height: 50px;
      width: 100%;
      line-height: 50px;
      text-align: center;
      color: #424242;
  }
</style>
